*{
    margin:0px;
    padding:0px;
}
li{
    list-style:none;
}

body{
    transition:opacity 0.5s linear;
    backdrop-filter: blur(15px);
    transition:all 0.5s linear;
}

#context{
    display: flex;
    flex-direction: column;
    align-items: center;
    height:600px;
    /*background:linear-gradient(to right,rgba(239,242,247,0.2) 0%,rgba(239,242,247,0) 10%),*/
    /*            linear-gradient(to left,rgba(239,242,247,0.2) 0%,rgba(239,242,247,0) 10%),*/
    /*            linear-gradient(to top,rgba(239,242,247,0.5) 5%,rgba(239,242,247,0) 60%),*/
    /*            linear-gradient(to bottom,rgba(239,242,247,0.5) 0%,rgba(239,242,247,0) 20%);*/

}
#context #mark{
    position:relative;
    margin-top:30px;
    height:50px;
    width:970px;
    overflow: hidden;
}

#context #mark span{
    position:absolute;
    display: inline-block;
    color:white;
    font-size:20px;
    font-weight:bolder;
    width:120px;
    height:50px;
    line-height:50px;
    text-align: center;
    cursor:pointer;
    transition:all 0.5s linear;
}
#context #mark #fixed{
    display: flex;
    position:absolute;
    left:360px;
}
#context #mark #fixed i{
    margin-left:10px;
    margin-right:10px;
    line-height: 50px;
    vertical-align: middle;
    cursor: pointer;
}
#context #mark #fixed #left,#context #mark #fixed #right{
    width:20px;
    z-index: 10;
}
#context #mark #fixed #left{
    background:url("/static/image/dicretion.png") 0px 6px no-repeat;
}
#context #mark #fixed #right{
    background:url("/static/image/dicretion.png") 0px -44px no-repeat;
}
#context #mark #fixed .sym:nth-child(2){
    display: inline-block;
    border:3px solid white;
    border-radius: 5px;
    width:150px;
    height:50px;
    font-size:30px;
}
#context #note:before,#context #note:after{
    content: '-';
    margin-left:10px;
    margin-right: 10px;
}
#context article ul{
    display: flex;
    flex-direction:row;
    justify-content: center;
    flex-wrap:wrap;
}
#context article .productList ul li{
    width:250px;
    height:300px;
    margin:20px 10px;
    background:white;
    box-shadow: 0px 0px 2px gainsboro;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#context article .productList ul li .productDesc{
    margin-top:30px;
    background:rgb(245,245,255);
    width:100%;
    height:70px;
    text-align: center;
}
#context article .productList ul li .productDesc .productName{
    display: inline-block;
    width:100%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding:10px;
}
#context article .productList ul li .productDefaultImg{
    border-radius: 5px;
    width:200px;
    margin-top:20px;
}
